<template>
  <el-table :data="tableData" style="width: 100%" border>
    <el-table-column
      v-for="(column, index) in columns"
      :key="index"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
    >
      <template #default="{ row }">
        <!-- 自定义模板内容 -->
        <span v-if="column.type === 'template'">
          <!-- 循环展示数据 -->
          <slot name="fordata" :row="row" />

          <!-- <span v-for="(item, idx) in row[column.prop]" :key="idx">
            {{ item.itemName }} <span v-if="idx !== row[column.prop].length - 1">, </span>
          </span> -->
        </span>
        <span v-else-if="column.type === 'status'">
          <slot name="status" :row="row" />
        </span>
        <span v-else>{{ row[column.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "CustomTable",
  props: {
    columns: {
      type: Array,
      required: true,
    },
    tableData: {
      type: Array,
      required: true,
    },
  },
});
</script>
